<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    :onClose="closeDialog"
    width="80%"
    top="48px"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
    >
    <template #footer>
      <t-button :loading="btnLoading" theme="success" @click="onSubmit(0)">暂存</t-button>
      <t-tooltip content="提交后不可再编辑会进入审批流程">
        <t-button :loading="btnLoading" :disabled="isCommit"  theme="primary" @click="onSubmit(1)">提交</t-button>
      </t-tooltip>
    </template>
    <t-loading :text="formLoadingText" size="medium" :loading="formLoading" showOverlay>
      <template #indicator>
        <t-icon v-if="formLoadingText === '数据读取中...'" name="loading" slot="icon"/>
        <t-icon v-else name="error-circle-filled" slot="icon"/>
      </template>
      <t-form
        labelAlign="left"
        labelWidth="130px"
        :data="formData"
        ref="form"
        :colon="true"
        :rules="edit ? rules : {}"
      >
        <t-row><b>一、国际科技合作与交流活动情况</b></t-row>
        <t-row>
          <t-form-item label="出访人次" name="cfrc">
            <t-input-adornment v-if="edit" append="人次">
              <t-input-number v-model="formData.cfrc"  placeholder="请输入出访人次" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.cfrc}} 人次</span>
          </t-form-item>
          <t-form-item label="接待来访人次" name="jdlfrc">
            <t-input-adornment v-if="edit" append="人次">
              <t-input-number v-model="formData.jdlfrc"  placeholder="请输入接待来访人次" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.jdlfrc}} 人次</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="人才引进数量" name="rcyjsl" :label-width="140">
            <t-input-adornment v-if="edit" append="人">
              <t-input-number v-model="formData.rcyjsl"  placeholder="请输入人才引进数量" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.rcyjsl}} 人</span>
          </t-form-item>
          <t-form-item label="项目合作数量" name="xmhzsl" :label-width="140">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.xmhzsl"  placeholder="请输入项目合作数量" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.xmhzsl}} 项</span>
          </t-form-item>
        </t-row>
  
        <t-row><b>二、主办国际会议/培训班情况</b></t-row>
        <t-card hover-shadow v-for="(info, index) in formData.traingInfos" :key="info.tid">
          <t-row justify="space-between">
            <t-col :span="3" style="padding-right: 10px">
              <t-form-item label="序号" :name="`traingInfos[${index}].sort`" :label-width="60">
                <t-input-number v-if="edit" v-model="info.sort"  placeholder="请输入序号" />
                <span v-else>{{info.sort}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="5" style="padding-right: 10px">
              <t-form-item label="会议/培训班名称" :name="`traingInfos[${index}].name`" :label-width="130">
                <t-input v-if="edit" v-model="info.name" placeholder="请输入会议/培训班名称"></t-input>
                <span v-else>{{info.name}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="举办地" :name="`traingInfos[${index}].location`" :label-width="90">
                <t-input v-if="edit" v-model="info.location" placeholder="请输入举办地"></t-input>
                <span v-else>{{info.location}}</span>
              </t-form-item>
            </t-col>
          </t-row>
          <t-row justify="space-between">
            <!-- <t-col :span="3" style="padding-right: 10px"> -->
              <t-form-item label="参会国家数量" :name="`traingInfos[${index}].attendNational`" :label-width="110">
                <t-input-adornment v-if="edit" append="个">
                  <t-input-number v-model="info.attendNational"  placeholder="请输入参会国家数量" theme="normal" />
                </t-input-adornment>
                <span v-else>{{info.attendNational}} 个</span>
              </t-form-item>
            <!-- </t-col>
            <t-col :span="3" style="padding-right: 10px"> -->
              <t-form-item label="总人数" :name="`traingInfos[${index}].totalCount`" :label-width="70">
                <t-input-adornment v-if="edit" append="人">
                  <t-input-number v-model="info.totalCount"  placeholder="请输入总人数" theme="normal" />
                </t-input-adornment>
                <span v-else>{{info.totalCount}} 人</span>
              </t-form-item>
            <!-- </t-col>
            <t-col :span="3" style="padding-right: 10px"> -->
              <t-form-item label="国外人员" :name="`traingInfos[${index}].foreignCount`" :label-width="80">
                <t-input-adornment v-if="edit" append="人">
                  <t-input-number v-model="info.foreignCount"  placeholder="请输入国外人员" theme="normal" />
                </t-input-adornment>
                <span v-else>{{info.foreignCount}} 人</span>
              </t-form-item>
            <!-- </t-col>
            <t-col :span="1" :offset="2" v-if="edit"> -->
              <t-button v-if="edit" variant="dashed" theme="danger" @click="delLine(index)">删除此行</t-button>
            <!-- </t-col> -->
          </t-row>
        </t-card>
        <t-card hover-shadow v-if="edit">
          <t-button variant="dashed" theme="primary" @click="addLine">
            <t-icon name="add" slot="icon" />
            添加一行
          </t-button>
        </t-card>
      </t-form>
    </t-loading>
  </t-dialog>
</template>

<script>
export default {
  name: 'TabCooperationAndCommunicationForm',
  props: {
    edit: { type: Boolean, default: true },
    infoId: { type: Number, default: -1 }
  },
  data() {
    return {
      visible: true,
      btnLoading: false,
      formLoading: true,
      formLoadingText: '数据读取中...',
      header: '',
      formData: {
        cfrc: undefined,
        jdlfrc: undefined,
        rcyjsl: undefined,
        xmhzsl: undefined,
        traingInfos: [],
        approveStatus: '1',
      },
      rules: {
        cfrc: [{ required: true, message: '出访人次不能为空' }],
        jdlfrc: [{ required: true, message: '接待来访人次不能为空' }],
        rcyjsl: [{ required: true, message: '人才引进数量不能为空' }],
        xmhzsl: [{ required: true, message: '项目合作数量不能为空' }],
        // list
        sort: [{ required: true, message: '序号不能为空' }],
        name: [{ required: true, message: '会议/培训班名称不能为空' }],
        location: [{ required: true, message: '举办地不能为空' }],
        attendNational: [{ required: true, message: '参会国家数量不能为空' }],
        totalCount: [{ required: true, message: '总人数不能为空' }],
        foreignCount: [{ required: true, message: '国外人员不能为空' }],
      },
    }
  },
  computed: {
    isCommit() {
      return this.formData.approveStatus !== '1'
    },
  },
  created() {
    if (this.edit) {
      if (this.infoId === -1) {
        this.header = '添加信息记录'
        this.formLoading = false
      } else {
        this.header = '修改信息内容'
        this.getDetail()
      }
    } else if (this.infoId === -1) {
      this.header = '信息错误！！！'
      this.formLoadingText = '信息错误，请联系管理员'
    } else {
      this.header = '查看信息内容'
      this.getDetail()
    }
  },
  methods: {
    // 查看和修改时获取详情
    async getDetail() {
      try {
        const { data } = await this.$api.kjtjdc.table.cooperationInfo.getInfoById(this.infoId);
        this.formData = data;
        this.formLoading = false
      } catch (e) {
        this.formLoadingText = e
        this.$message.error('数据获取失败，请稍后再试！')
      }
    },
    async onSubmit(isCommit) {
      this.btnLoading = true
      let validRes
      try {
        validRes = await this.$refs.form.validate()
      // eslint-disable-next-line no-empty
      } catch (e) {}
      if (validRes !== true) {
        this.$message.warning('请完善表单')
        this.btnLoading = false
        return
      }
      let action = 'edit'
      if (this.infoId === -1) {
        // 新增
        action = 'add'
      }
      if (isCommit) {
        // 提交
        this.formData.approveStatus = '2'
      } else {
        // 暂存
        this.formData.approveStatus = '1'
      }
      try {
        const { code, msg } = await this.$api.kjtjdc.table.cooperationInfo[action](this.formData);
        if (code === 200) {
          this.$message.success(`${isCommit?'提交':'暂存'}信息成功！`)
          this.btnLoading = false
          this.$emit('update:visible', false);
          this.$emit('reload');
        } else {
          throw msg
        }
      } catch (e) {
        this.$message.error(e)
        this.btnLoading = false
      }
    },
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
    addLine() {
      const tid = Math.random().toString(32).substring(2, 7)
      this.formData.traingInfos.push({tid})
    },
    delLine(idx) {
      this.formData.traingInfos.splice(idx, 1)
    }
  }
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 8px 0;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
.t-form__item {
  margin: 0 35px 0 0;
}
.t-row {
  margin-bottom: 20px;
}
.t-row:last-of-type {
  margin-bottom: 0;
}
.t-card {
  margin-bottom: 10px;
}
</style>
